<template>
  <div class="photolist">
    <van-tabs @click="getimages">
      <van-tab v-for="item in cates" :key="item.id" :title="item.title"></van-tab>
    </van-tabs>
    <router-link
      tag="div"
      :to="'/home/photoinfo/'+img.id"
      class="img-box"
      v-for="img in imageList"
      :key="img.id"
    >
      <img v-lazy="img.img_url">
      <div class="img-info"></div>
    </router-link>
  </div>
</template>
<script>
import { ImagePreview } from "vant";
import { Toast } from "vant";
export default {
  data: () => ({
    cates: [],
    imageList: []
  }),
  created() {
    this.getimgcategory();
    this.getimages(0);
  },
  methods: {
    async getimgcategory() {
      const {
        data: { status, message }
      } = await this.$http.get("api/getimgcategory");
      if (status == 0) {
        message.unshift({ id: 0, title: "全部" });
        this.cates = message;
      } else {
        Toast("获取失败");
      }
    },
    async getimages(id) {
      console.log(id);
      const {
        data: { status, message }
      } = await this.$http.get("api/getimages/" + id);
      if (status == 0) {
        this.imageList = message;
      } else {
        Toast("获取失败");
      }
    }
  }
};
</script>
<style lang="less">
.photolist {
  padding: 10px;
  .van-tabs__line {
    background-color: #1989fa;
  }
  .img-box {
    margin-top: 10px;
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}
</style>